<template>
  <div class="index">
    <div class="top-nav-lists flex-row flex-justify-content-sb flex-align-items-c">
      <div class="nav-item">
        <p class="number">{{proportionData.online.online+"/"+proportionData.online.total}}</p>
        <p>占比：{{proportionData.online.proportion}}</p>
        <p>在线/总设备（台）</p>
        <img src alt />
      </div>
      <div class="nav-item">
        <p class="number">{{proportionData.today.viewers+"/"+proportionData.today.visitors}}</p>
        <p>占比：{{proportionData.today.proportion}}</p>
        <p>今日实际观看人次/总人流量</p>
      </div>
      <div class="nav-item">
        <p class="number">{{proportionData.yesterday.viewers+"/"+proportionData.yesterday.visitors}}</p>
        <p>占比：{{proportionData.yesterday.proportion}}</p>
        <p>昨日实际观看人次/总人流量</p>
      </div>
      <div class="nav-item">
        <p class="number">{{proportionData.total.viewers+"/"+proportionData.total.visitors}}</p>
        <p>占比：{{proportionData.total.proportion}}</p>
        <p>总实际观看人次/总人流量</p>
      </div>
    </div>
    <div class="line-data flex-row flex-justify-content-sb">
      <div style="width:85%;">
        <div class="line-header flex-row flex-align-items-c flex-justify-content-sb">
          <span class="header-txt">流量分析</span>
          <div class="tabs">
            <span
              data-daytype="1"
              :style="dayType == 1?'color:#ef7e09;':''"
              @click="searchFlow($event)"
            >今日</span>
            <span
              data-daytype="2"
              :style="dayType == 2?'color:#ef7e09;':''"
              @click="searchFlow($event)"
            >昨日</span>
            <span
              data-daytype="3"
              :style="dayType == 3?'color:#ef7e09;':''"
              @click="searchFlow($event)"
            >本周</span>
            <span
              data-daytype="4"
              :style="dayType == 4?'color:#ef7e09;':''"
              @click="searchFlow($event)"
            >本月</span>
          </div>
        </div>
        <ve-line :data="chartData"></ve-line>
      </div>
      <div style="margin-top: 50px;width:14%;padding-top:20px;">
        <p style="text-align: center;margin:10px 0;color:#ef7e09;">观看数TOP</p>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="观看人数" name="first">
            <div v-for="(item,index) in rank.viewers" :key="index" class="ranking-item">
              <el-tooltip
                class="item flex-row"
                effect="dark"
                :content="item.address"
                placement="top"
              >
                <p class>
                  <span class="circle">{{index+1}}</span>
                  {{item.name}}
                </p>
              </el-tooltip>
            </div>
          </el-tab-pane>
          <el-tab-pane label="总人流量" name="second">
            <div v-for="(item,index) in rank.visitors" :key="index" class="ranking-item">
              <el-tooltip
                class="item flex-row"
                effect="dark"
                :content="item.address"
                placement="top-start"
              >
                <p class>
                  <span class="circle">{{index+1}}</span>
                  {{item.name}}
                </p>
              </el-tooltip>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { throws } from "assert";
export default {
  props: {},
  data() {
    return {
      activeName: "first",
      proportionData: {
        online: {
          online: "0",
          total: "0",
          proportion: "0%"
        },
        today: {
          visitors: "0",
          viewers: "0",
          proportion: "0%"
        },
        total: { visitors: "0", viewers: "0", proportion: "0%" },
        yesterday: { visitors: "0", viewers: "0", proportion: "0%" }
      },
      rank: {
        viewers: [],
        visitors: []
      },
      chartData: {
        columns: ["日期", "观看人数", "总人流量"],
        rows: [
          { 日期: "0:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "2:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "4:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "6:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "8:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "10:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "12:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "14:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "16:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "18:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "20:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "22:00", 观看人数: 0, 总人流量: 0 },
          { 日期: "24:00", 观看人数: 0, 总人流量: 0 }
        ]
      },
      dayType: 1
    };
  },
  computed: {},
  created() {
    this.getProportion();
    this.getDiagram();
  },
  mounted() {},
  watch: {},
  methods: {
    handleClick() {},
    getProportion() {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem("userinfo")).id
      }`;
      let RASCODE = this.$getCode(code);
      this.http
        .getProportion({
          secret: RASCODE
          // secret: 'IBNjpckrEitpfjz1kcAU/jzzK4nh8X7EZ45HZBPzw3CqkwCIj1TeMMLgC6hrhfShqEwBuImQrbnJ7eClyC+ePh1njiZ3D4NInZowAqbgc7y4KyyNkKW0NnZVIDrnZE1sINRmbNnkmQhUF6L4KSkWZfpYrBZS+tXQtLvCWnqB/kBoDNqg8BpMvuLvHE6h+Dc6bMBhezZrwC9pbuLKTeC/Zr5cfqgXdx58Ar/7txaPoA5l4+OqrXpSnCIIoChlbRmVEA3R89JARecG40VGj1d4jKMEp5UH+frZknj2FodkUMsb6RsHB95txhFBc00kCn1tSfh2wu2sS/0FT9DIT7Py88aYQulYXx5SJ0b5HQxDusdLrI4hxrh8Ji7EHEktOkngG8+oJ3JzTc4yKvy2+iz1IZaweb+2UelTTOK8eINRI4GAFVWDOroVPIgmhkuZfMmTCHST+aK0IHER2K0oHFtUH2N6pMm6bcnUfHBwXtr50QAGkp3KjXtJ8F6QXWLtl4An5+EUzMBekKKjYM5UMreFCKOfZYEvIBjGqN3Iu2mPss96q3m/RWikYotUJrqPSoa99C61XgRyejPukk0qDCmo++nd3Tgra+MifcyvVNFYNI0mBZOau7u8m34PyVGs7+LKeuy7f37Fg2z2mnU+gCqI95QIgpN85nIKdCjBKteqFmo='
        })
        .then(res => {
          // console.log("getProportion", res);
          if (res.data.errno == "000") {
            this.proportionData = res.data.result;
          } else {
          }
        })
        .catch(err => {});
      // this.http
      //   .getCode(
      //     `advertiser_id=${JSON.parse(sessionStorage.getItem("userinfo")).id}`
      //   )
      //   .then(res => {
      //     console.log(res);
      //     if (res.data.errno == "000") {
      //       let secret = res.data.result.encrypt;

      //     }
      //   })
      //   .catch(err => {});
    },
    getDiagram() {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem("userinfo")).id
      }&type=${this.dayType}`;
      let RASCODE = this.$getCode(code);
      this.http
        .getDiagram({
          secret: RASCODE
        })
        .then(res => {
          if (res.data.errno == "000") {
            console.log(res.data.result.data.viewers);
            this.rank = res.data.result.data.rank;
            res.data.result.data.viewers.forEach((element, index) => {
              //   console.log("viewers--", element);
              //   console.log(index)
              if (index % 2 == 0 && index > 0) {
                // console.log('index % 2-index',index);
                // console.log('index % 2',res.data.result.data.viewers[index+1]);
                this.chartData.rows[index / 2]["观看人数"] =
                  res.data.result.data.viewers[index - 1] +
                  res.data.result.data.viewers[index];
                this.chartData.rows[index / 2]["总人流量"] =
                  res.data.result.data.visitors[index - 1] +
                  res.data.result.data.visitors[index];
              } else if (
                index == 0 ||
                index == res.data.result.data.viewers.length - 1
              ) {
                // console.log(element);
                this.chartData.rows[index]["观看人数"] = element;
                this.chartData.rows[index]["总人流量"] =
                  res.data.result.data.visitors[index];
              }
            });

            // for (let i = 0; i < res.data.result.data.viewers.length; i++) {
            //     // console.log("viewers--", res.data.result.data.viewers[i]);
            //     if(i == 0){
            //         this.chartData.rows[i]["观看人数"] = res.data.result.data.viewers[i]
            //     }
            //     if(i>0){
            //         console.log(i)
            //         if(i%2 == 0){
            //             this.chartData.rows[i/2]["观看人数"] = res.data.result.data.viewers[i]+res.data.result.data.viewers[i-1]
            //         }
            //     }
            // }
            // try {
            //   res.data.result.data.viewers.forEach((element, index) => {
            //     //   console.log("viewers--", element);
            //     //   console.log(index)
            //     if (index % 2 == 0 && index > 0) {
            //       // console.log('index % 2-index',index);
            //       // console.log('index % 2',res.data.result.data.viewers[index+1]);
            //       this.chartData.rows[index / 2]["观看人数"] =
            //         res.data.result.data.viewers[index - 1] +
            //         res.data.result.data.viewers[index];
            //     } else if (
            //       index == 0 ||
            //       index == res.data.result.data.viewers.length - 1
            //     ) {
            //       // console.log(element);
            //       this.chartData.rows[index]["观看人数"] = element;
            //     }
            //     if (index == res.data.result.data.viewers.length - 1) {
            //       throw new Error("End");
            //     }
            //   });
            // } catch (e) {
            //   if (e.message != "End") throw e;
            // }
            // try {
            //   res.data.result.data.visitors.forEach((element, index) => {
            //     console.log("visitors--", element);
            //     //   console.log(index)
            //     if (index % 2 == 0) {
            //       // console.log(element);
            //       this.chartData.rows[index / 2]["总人流量"] =
            //         res.data.result.data.visitors[index - 1] + element;
            //     } else if (
            //       index == 0 ||
            //       index == res.data.result.data.visitors.length - 1
            //     ) {
            //       console.log(element);
            //       this.chartData.rows[index]["总人流量"] = element;
            //     }
            //     if (index == res.data.result.data.visitors.length - 1) {
            //       throw new Error("EndViewers");
            //     }
            //   });
            // } catch (e) {
            //   if (e.message != "EndViewers") throw e;
            // }
          } else {
            this.rank = {
              viewers: [],
              visitors: []
            };
            this.chartData.rows = [
              { 日期: "0:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "2:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "4:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "6:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "8:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "10:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "12:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "14:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "16:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "18:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "20:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "22:00", 观看人数: 0, 总人流量: 0 },
              { 日期: "24:00", 观看人数: 0, 总人流量: 0 }
            ];
          }
        })
        .catch(err => {});
      // this.http
      //   .getCode(

      //   )
      //   .then(res => {
      //     console.log(res);
      //     if (res.data.errno == "000") {
      //       let secret = res.data.result.encrypt;

      //     }
      //   })
      //   .catch(err => {});
    },
    searchFlow(event) {
      // console.log(event.target.dataset.daytype);
      this.dayType = event.target.dataset.daytype;
      this.getDiagram();
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
